<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 px-4">
    <n-card class="w-full max-w-4xl py-12">
      <div class="flex justify-between items-center mb-6">
        <span class="text-2xl font-bold text-blue-600">设备管理</span>
        <n-button @click="loadDevices" secondary>刷新</n-button>
      </div>
      <n-list v-if="devices.length">
        <n-list-item v-for="device in devices" :key="device.uid">
          <div class="flex justify-between items-center w-full">
            <div>
              <span class="font-semibold">{{ device.device_name || device.deviceId || device.uid }}</span>
              <span class="ml-2 text-xs text-gray-400">UID: {{ device.uid }}</span>
            </div>
            <n-tag :type="device.online ? 'success' : 'default'">
              {{ device.online ? '在线' : '离线' }}
            </n-tag>
          </div>
        </n-list-item>
      </n-list>
      <n-empty v-else description="暂无设备" />
      <n-alert v-if="error" type="error" class="mt-2">{{ error }}</n-alert>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { fetchDevices } from '../api/device';

const devices = ref<any[]>([]);
const error = ref('');

const loadDevices = async () => {
  error.value = '';
  try {
    const res = await fetchDevices();
    devices.value = res.data || [];
  } catch (e: any) {
    error.value = e.response?.data?.message || '获取设备失败';
  }
};

loadDevices();
</script>

<style scoped>
.device-manager {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.device-manager ul {
  margin-top: 20px;
  padding-left: 0;
}
.device-manager li {
  list-style: none;
  margin-bottom: 10px;
}
</style> 